<!--页面主要内容-->
<main class="lyear-layout-content">
  <div class="container-fluid p-t-15">
    <div class="row">
      <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
        <div class="callout callout-success card card-body clearfix" style="flex-direction:row;">
          欢迎管理员：<span style="color: red;">{$LoginAdmin.nickname}</span>。当前时间：<span class="time"></span>
        </div>
      </div>
    </div>

    <div class="row">
      <div class="col-md-6 col-xl-3">
        <div class="card bg-primary text-white">
          <div class="card-body clearfix">
            <div class="flex-box">
              <span class="img-avatar img-avatar-48 bg-translucent"><i
                  class="mdi mdi-clipboard-text-outline fs-22"></i></span>
              <span class="fs-22 lh-22">{$PostCount}</span>
            </div>
            <div class="text-right">文章数</div>
          </div>
        </div>
      </div>

      <div class="col-md-6 col-xl-3">
        <div class="card bg-danger text-white">
          <div class="card-body clearfix">
            <div class="flex-box">
              <span class="img-avatar img-avatar-48 bg-translucent"><i class="mdi mdi-account fs-22"></i></span>
              <span class="fs-22 lh-22">{$UserCount}</span>
            </div>
            <div class="text-right">用户总数</div>
          </div>
        </div>
      </div>

      <div class="col-md-6 col-xl-3">
        <div class="card bg-success text-white">
          <div class="card-body clearfix">
            <div class="flex-box">
              <span class="img-avatar img-avatar-48 bg-translucent"><i class="mdi mdi-shopping fs-22"></i></span>
              <span class="fs-22 lh-22">{$ProductCount}</span>
            </div>
            <div class="text-right">商品总数</div>
          </div>
        </div>
      </div>

      <div class="col-md-6 col-xl-3">
        <div class="card bg-purple text-white">
          <div class="card-body clearfix">
            <div class="flex-box">
              <span class="img-avatar img-avatar-48 bg-translucent"><i class="mdi mdi-comment-outline fs-22"></i></span>
              <span class="fs-22 lh-22">{$CommentCount} 条</span>
            </div>
            <div class="text-right">评论总数</div>
          </div>
        </div>
      </div>
    </div>

    <!-- TODO 系统通知 -->
    <div class="row">
      <div class="col-lg-12">
        <div class="card">
          <header class="card-header">
            <div class="card-title">系统通知</div>
          </header>
          <div class="card-body">
            <div class="table-responsive">
              <table class="table table-hover">
                <thead>
                  <tr>
                    <th>#</th>
                    <th>标题</th>
                    <th>开始日期</th>
                    <th>截止日期</th>
                    <th>状态</th>
                    <th>进度</th>
                  </tr>
                </thead>
                <tbody>
                  <tr>
                    <td>1</td>
                    <td>原生PHP公司后台管理项目</td>
                    <td>2022/05/10</td>
                    <td>2022/05/10</td>
                    <td><span class="badge badge-success">已完成</span></td>
                    <td>
                      <div class="progress progress-striped progress-sm">
                        <div class="progress-bar progress-bar-success" style="width: 100%"></div>
                      </div>
                    </td>
                  </tr>
                  <tr>
                    <td>2</td>
                    <td>tp5项目 - Gundam社区</td>
                    <td>2022/05/20</td>
                    <td>2022/06/01</td>
                    <td><span class="badge badge-success">已完成</span></td>
                    <td>
                      <div class="progress progress-striped progress-sm">
                        <div class="progress-bar progress-bar-success" style="width: 100%"></div>
                      </div>
                    </td>
                  </tr>
                  <tr>
                    <td>3</td>
                    <td>VUE3.0 Gundam商城</td>
                    <td>2022/06/01</td>
                    <td>2022/06/20</td>
                    <td><span class="badge badge-warning">进行中</span></td>
                    <td>
                      <div class="progress progress-striped progress-sm">
                        <div class="progress-bar progress-bar-warning" style="width: 95%"></div>
                      </div>
                    </td>
                  </tr>
                  <tr>
                    <td>4</td>
                    <td>原生小程序开发项目</td>
                    <td>2022/06/20</td>
                    <td>2022/06/20</td>
                    <td><span class="badge badge-danger">未开始</span></td>
                    <td>
                      <div class="progress progress-striped progress-sm">
                        <div class="progress-bar progress-bar-danger" style="width: 0%"></div>
                      </div>
                    </td>
                  </tr>
                </tbody>
              </table>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- TODO 数据可视化 -->
    <div class="row">
      <div class="col-md-6">
        <div class="card">
          <div class="card-header">
            <div class="card-title">每周用户</div>
          </div>
          <div class="card-body">
            <canvas class="js-chartjs-bars"></canvas>
          </div>
        </div>
      </div>

      <div class="col-md-6">
        <div class="card">
          <div class="card-header">
            <div class="card-title">交易历史记录</div>
          </div>
          <div class="card-body">
            <canvas class="js-chartjs-lines"></canvas>
          </div>
        </div>
      </div>
    </div>


  </div>
</main>
<!--End 页面主要内容-->

<script type="text/javascript">
  $(document).ready(function (e) {
    var $dashChartBarsCnt = jQuery(".js-chartjs-bars")[0].getContext("2d"),
      $dashChartLinesCnt = jQuery(".js-chartjs-lines")[0].getContext("2d");

    var $dashChartBarsData = {
      labels: ["周一", "周二", "周三", "周四", "周五", "周六", "周日"],
      datasets: [{
        label: "注册用户",
        borderWidth: 1,
        borderColor: "rgba(0, 0, 0, 0)",
        backgroundColor: "rgba(51, 202, 185, 0.5)",
        hoverBackgroundColor: "rgba(51, 202, 185, 0.7)",
        hoverBorderColor: "rgba(0, 0, 0, 0)",
        data: [2500, 1500, 1200, 3200, 4800, 3500, 1500],
      }, ],
    };
    var $dashChartLinesData = {
      labels: [
        "2003",
        "2004",
        "2005",
        "2006",
        "2007",
        "2008",
        "2009",
        "2010",
        "2011",
        "2012",
        "2013",
        "2014",
      ],
      datasets: [{
        label: "交易资金",
        data: [20, 25, 40, 30, 45, 40, 55, 40, 48, 40, 42, 50],
        borderColor: "#358ed7",
        backgroundColor: "rgba(53, 142, 215, 0.175)",
        borderWidth: 1,
        fill: false,
        lineTension: 0.5,
      }, ],
    };

    new Chart($dashChartBarsCnt, {
      type: "bar",
      data: $dashChartBarsData,
    });

    var myLineChart = new Chart($dashChartLinesCnt, {
      type: "line",
      data: $dashChartLinesData,
    });

    let forMat = function (val) {
      let date = new Date(val)
      let year = date.getFullYear()
      let month = date.getMonth() + 1
      let day = date.getDate()
      let hours = date.getHours()
      hours = hours < 10 ? '0' + hours : hours
      let minutes = date.getMinutes()
      minutes = minutes < 10 ? '0' + minutes : minutes
      let seconds = date.getSeconds()
      seconds = seconds < 10 ? '0' + seconds : seconds
      let res = year + '年' + month + '月' + day + '日 ' + hours + ':' + minutes + ':' + seconds
      return res;
    }
    $('.time').html(forMat(new Date()));
    // console.log(forMat(now));
    setInterval(() => {
      let now = new Date();
      $('.time').html(forMat(now));

    }, 1000);

  });
</script>